<template>
	<view>
		<view class="showPhoneNumber">
			<text>验证短信已发送到{{phoneNumber}}</text>
		</view>
		<view class="allMargin">
			<form @submit="formSubmit" @reset="formReset">
				<input name="validationCode" type="text" placeholder="请输入短信验证码" class="common-input"/>		
				<button form-type="submit" class="common-button">提交验证码</button>
			</form>
		</view>
		
	</view>
</template>

<script>
	var graceChecker = require("@/common/graceChecker.js"); //graceUI的表单验证
	import {
		verifyMemberCode
	} from '@/common/api/quickRegister/quickRegister.js'
	export default{
		props: ["phoneNumber"],
		data (){
			return{
				info: '',
				validationCode: "",
			}
		},
		methods:{
			formSubmit:function(e){
				//短信验证码的验证：6位纯数字
				var reg=/^\d{6}$/;
				var rule = [
					{
						name: "validationCode",
						checkType: "reg" ,
						checkRule: reg ,
						errorMsg: "请输入6位纯数字的短信验证码",
					}
				];
				this.info = e.target.value;
				this.info.validationCode = this.info.validationCode.trim();
				var checkRes = graceChecker.check(this.info, rule);
				if(checkRes) {
					this.validationCode = this.info.validationCode.trim();
					verifyMemberCode(this.phoneNumber,this.validationCode).then(res=>{
							if (res.statusCode == 200) {
								if(res.data.code != 200){
									//1.若检验不通过（验证码不正确）
									uni.showToast({
										title: res.data.message,
										icon: 'none',
										mask: true,
										duration: 1000
									})
								}else{
									//2.若校验通过
									console.log("verifyMemberCode res:" +res)
									let getStep ={
										phoneNumber: this.phoneNumber,
										authCode: this.validationCode,
										active: 2
									}
									this.$emit("getStep",getStep)
								}
							}else {
								uni.showToast({
									title: '网络错误',
									icon: 'none',
									mask: true,
									duration: 1000
								})
							}
						})
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
				
			}
		},
		onLoad() {
			console.log(this.phoneNumber)
		}
	}
</script>

<style>
	page{
		background: #F2F2F2;
	}
	.showPhoneNumber {
		text-align: center;
		padding-top: 20rpx;
		margin-bottom: 40rpx;
	}
</style>
